<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin:0px 0xp 10px 0px;">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>商品修改</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 商品列表 -->
      <el-table :data="tableData" border style="width:100%">
        <el-table-column prop="id" label="ID" width="60"></el-table-column>
        <el-table-column prop="title" label="商品名称" width="120"></el-table-column>
        <el-table-column prop="img" label="商品图片" width="120">
          <template slot-scope="scope">
            <img :src="scope.row.img.split(',')[0]" alt="" width="40">
          </template>
        </el-table-column>
        <el-table-column prop="price" label="商品价格" width="80"></el-table-column>
        <el-table-column label="添加时间" prop="tiem" width="160">
          <template slot-scope="scope">
            <span>{{scope.row.tiem | dateFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="商品类型" width="80">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.type==1">手机</el-tag>
            <el-tag type="success" v-if="scope.row.type==2">周边</el-tag>
            <el-tag type="success" v-if="scope.row.type==3">家电</el-tag>
            <el-tag type="success" v-if="scope.row.type==4">智能</el-tag>
            <el-tag type="success" v-if="scope.row.type==5">耳机</el-tag>
            <el-tag type="success" v-if="scope.row.type==6">配件</el-tag>
            <el-tag type="success" v-if="scope.row.type==7">电源</el-tag>
            <el-tag type="success" v-if="scope.row.type==8">音箱</el-tag>
            <el-tag type="success" v-if="scope.row.type==9">背包</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
              <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="update(scope.row.id)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="添加" placement="top-start">
              <el-button type="success" icon="el-icon-check" circle size="mini" @click="$router.push({'name':'gettype'})"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
              <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="detail(scope.row.id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- <el-table-column></el-table-column>
                <el-table-column></el-table-column> -->
      </el-table>
      <!-- 分页插件 -->
      <page @down="change" @up="changes" :list="tableData1"></page>
    </el-card>
  </div>
</template>
<script>
// 引入分页组间
import page from '@/components/pagesize.vue'
import axi from '@/utils/text.js'
export default {
  data() {
    return {
      tableData: [],
      tableData1: []// 分页前的数据
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await axi.getAllPost('/goods/milei/get')
      if (res.data.err_code === 1) return
      this.tableData1 = res.data.message.reverse()
      this.tableData = this.tableData1.slice(0, 10)
    },
    // 下一页分页事件
    change(num1) {
      this.tableData = num1
      //  console.log(num1,si,'下一页')
      // this.tableData=this.tableData1.slice(num1,si)
    },
    changes(num1) {
      this.tableData = num1
      // console.log(num1,si,'上一页')
      // this.tableData=this.tableData1.slice(num1,si)
    },
    // 修改商品信息
    update(val) {
      this.$router.push('/gettypesdetail?id=' + val)
      console.log(val)
    },
    // 删除事件
    detail(val) {
      this.$message.info('抱歉你没有权限')
    }
  },
  components: {
    page
  }
}
</script>
<style lang="less" scoped>
</style>
